import React,{Component} from 'react';
import {connect} from 'react-redux';
import { Link } from 'react-router'
import Moment from 'moment';
import 'isomorphic-fetch';
import './../Sass/news.scss';
import NavLink from './NavLink';

import {getCateList,postNewsList,postNewsList_top,selectNews} from '../actions/counter'

var News = React.createClass({
    componentWillMount(){
        this.props.postNewsList();
        this.props.getCateList();
        // this.props.postNewsList_top();
    },


    render(){
        
        var self = this;
        //function
        function toDetail(){
            // console.log("detail");
        }
        function selNews(e){
           var linkid = e.target.getAttribute("data-linkid")
           self.props.selectNews(linkid);
        }

        function pageChange(e){
            
            if(e.target.innerText>0){
                self.props.postNewsList(e.target.innerText);
            }else if(e.target.getAttribute("aria-label")=="Next"){
                if(self.props.data_newsOri.page+1<=self.props.data_newsOri.pages){
                    //页数+1 请求
                    var nextpage = self.props.data_newsOri.page+1;
                    self.props.postNewsList(nextpage);
                }else{
                    //保持本页
                    console.log("keep");
                }
                
            }else if(e.target.getAttribute("aria-label")=="Previous"){
                if(self.props.data_newsOri.page-1>0){
                    //页数-1 请求
                    var previouspage = self.props.data_newsOri.page-1;
                    self.props.postNewsList(previouspage);
                }else{
                    //保持本页
                    console.log("keep");
                }
            }else{
                console.log("UnknowOperate")
            }
            // self.props.postGoodList(e.target.innerText);
        }


        //----------------------
        if(this.props.data_cate){
            //创建右侧列表
            
             var newsList = this.props.data_cate.map(function(ele,index){
                return (
                    <div>
                        <p onClick={selNews} key={ele._id} data-linkid={ele._id}>{ele.title}</p>
                    </div>
                )
            })
        }

        
        // console.log(this.props.data_newsTop);
        if(this.props.data_news.length>0 && this.props.data_newsTop.length>0){
            //bigpic
            var picSrc = "http://localhost:3000/"+this.props.data_newsTop[0].picture;
            //hotTwo
            var hotTwo = [];
            for(var i=0;i<2;i++){
                const tempSrc="http://localhost:3000/"+this.props.data_newsTop[i].picture;
                // console.log("date:",Moment(this.props.data_newsTop[i].date).format('MM-DD-YYYY'));
                var transDate = Moment(this.props.data_newsTop[i].date).format('MM-DD-YYYY');
                hotTwo.push (
                    <div className="row">
                        <div className="col-lg-5 col-md-5">
                            <img src={tempSrc} alt="新闻"/>
                        </div>
                        <div className="col-lg-7 col-md-7">
                            <h3>{this.props.data_newsTop[i].title}</h3>
                            <p className="follow"><span>笔者：{this.props.data_newsTop[i].author}</span><span>时间：{transDate}</span></p>
                            <p>{this.props.data_newsTop[i].content}</p>
                        </div>
                    </div>
                )
            }



        
            var showData = [];
            var newsLen = this.props.data_news.length;
            
                    var rowList = [];
                    // Math.ceil向上舍入计算Rows行数
                    for (var i = 0; i < Math.ceil(newsLen/3); i++) {
                        var colList = [];
                        
                        for (var j = 0; j < 3; j++) {
                            var index= i*3+j;
                            //加上记录数判断，如果下标索引值小于总的数组长度，则进行列表显示，否则不加入数据
                            if(index<newsLen){
                                // console.log(this.state.dataGoods[index].picture)
                                var imgUrl = 'http://localhost:3000/'+this.props.data_news[index].picture;
                                var pid =this.props.data_news[index]._id;
                                colList.push(
                                    <div key={index} className="col-lg-4 newsItem col-md-4">
                                        <div className="row" onClick={toDetail}>
                                            <div className="col-lg-7 col-md-7">
                                                <h2>{this.props.data_news[index].title}</h2>
                                                <p>{this.props.data_news[index].content}</p>
                                            </div>
                                            <div className="col-lg-5 col-md-5">
                                                <Link to={`/comment/${index}`}><img src={imgUrl} alt="myGoods"/></Link>       
                                                
                                            </div>
                                            
                                            
                                            
                                        </div>
                                    </div>
                                )
                            }
                        };
                        rowList.push(
                            <div className="row" key={i}>{colList}</div>
                        )
                    };
        
                    showData = rowList;
        
                    //列表分页处理
                    const pageMaxSize = Math.ceil(this.props.data_newsOri.total/12);
                    var pageButton=[];
                    for(var i=0;i<pageMaxSize;i++){
                        
                        pageButton.push(<li><a href="javascript:void(0)" onClick={pageChange}>{i+1}</a></li>)
                    }
                     
                    var paginate=(
                        <nav aria-label="Page navigation">
                            <ul className="pagination">
                                <li>
                                    <a href="javascript:void(0)" aria-label="Previous" onClick={pageChange}>
                                    <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                    {pageButton}
                                <li>
                                    <a href="javascript:void(0)" aria-label="Next" onClick={pageChange}>
                                    <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    )
            


        }


        












        return (
            <div>
                <div id="news">
                <div className="container">
                    <div className="row topCont">
                        <div className="col-lg-6 bigPic">
                            <div className="bigPicBox">
                                <img src={picSrc}/>
                            </div>
                        </div>
                        <div className="col-lg-6 topLeft">
                            <div className="mainNewsBox">
                                {hotTwo}
                            </div>
                        </div>
                    </div>
                    
                    <div className="row">
                        <div className="col-lg-9" id="newsPart">
                            {showData}
                            {paginate}
                        </div>
                        <div className="col-lg-3" id="newsList">
                            {newsList}
                        </div>
                    </div>
                </div>
            </div>
            </div>
        )
    }
})
const getValue = (state)=>{
    var dataCate=[];
    state.dataCate.map(function(ele,index){
        if(ele.type==1){
            dataCate.push(ele);
        }
    })
    return {
        data_cate:dataCate,
        data_news:state.dataNews,
        data_newsOri:state.dataNewsOri,
        data_newsTop:state.dateNews_top,
        data_Car:state.dataCar
    }
}

const newsContent = connect(
    getValue,
    {getCateList,postNewsList,postNewsList_top,selectNews}
)(News)

module.exports = newsContent;